import styles from './index.less';
import { TextArea, ImageUploader, Form, Input } from 'antd-mobile';
import { useState } from 'react';
import { history } from 'umi';
function Question() {
  const [Value, setValue] = useState({});
  const [fileListPhoto, setFileListPhoto] = useState([]);
  async function mockUpload(file) {
    await sleep(3000);
    return {
      url: URL.createObjectURL(file),
    };
  }
  const confirm = () => {
    console.log(Value);
  };
  const goBack = () => {
    history.go(-1);
  };
  return (
    <>
      <div className={styles.question}>
        <div className={styles.header}>
          <span onClick={goBack}>&lt;&lt;返回</span>

          <h2>信息发布</h2>
        </div>
        <div className={styles.form}>
          <div className={styles.describe}>
            <p>内容描述：</p>
            <TextArea
              placeholder="请输入内容"
              value={Value.describe}
              onChange={(val) => {
                setValue({ ...Value, describe: val });
              }}
              rows={5}
            ></TextArea>
          </div>
          <div className={styles.di}></div>
          <div className={styles.photo}>
            <h4>上传照片</h4>
            <p>有照片，更真实，信息传播更快哦</p>
            <ImageUploader
              value={fileListPhoto}
              onChange={setFileListPhoto}
              upload={mockUpload}
            />
          </div>
          <div className={styles.di}></div>
          <div className={styles.bottom}>
            <Form layout="horizontal">
              <Form.Item label="联系人：" name="username">
                <Input
                  clearable
                  value={Value.username}
                  onChange={(val) => {
                    setValue({ ...Value, username: val });
                  }}
                />
              </Form.Item>
              <Form.Item label="手机号码：" name="phone">
                <Input
                  clearable
                  value={Value.phone}
                  onChange={(val) => {
                    setValue({ ...Value, phone: val });
                  }}
                />
              </Form.Item>
            </Form>
          </div>
          <div className={styles.confirm}>
            <h2 onClick={confirm}>确认发布</h2>
          </div>
        </div>
      </div>
    </>
  );
}

export default Question;
